<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>查看房屋信息</title>
    <link th:replace="common/header"/>
</head>
<body class="no-skin">
<div th:replace="common/top"/>
<div class="main-container ace-save-state" id="main-container">
    <div th:replace="common/menu"/>
    <div class="main-content">
        <div class="main-content-inner">
            <div th:replace="common/title"/>
            <div class="page-content">
                <div th:replace="common/skin"/>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue"><i class="fa fa-server" aria-hidden="true"></i>查看房屋信息
                        </h3>
                        <div class="row-fluid">
                            <!--PAGE CONTENT BEGINS HERE-->
                            <div class="span3">
                                <div class="control-group">
                                    房屋名称:<span th:text="${houseInfo.houseName}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    <span>卧室:<span th:text="${houseInfo.roomNumber + '间'}">1</span></span>-
                                    <span>客厅:<span th:text="${houseInfo.drawingNumber + '间'}">1</span></span>-
                                    <span>厨房:<span th:text="${houseInfo.kitchenNumber + '间'}">1</span></span>-
                                    <span>卫生间:<span th:text="${houseInfo.restroomNumber + '间'}">1</span></span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    朝向:<span th:text="${houseInfo.orientation.text + '向'}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    房屋面积:<span th:text="${houseInfo.houseArea + '平方米'}">1</span>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <!--PAGE CONTENT BEGINS HERE-->
                            <div class="span3">
                                <div class="control-group">
                                    <span>所在楼层:<span th:text="${houseInfo.layer + '层'}">1</span></span>-
                                    <span>总楼层:<span th:text="${houseInfo.totalLayer + '层'}">1</span></span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    所在小区:<span th:text="${houseInfo.polt}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    详细地址:<span th:text="${houseInfo.address}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    <span>所在省:<span th:text="${houseInfo.provinceName}"
                                                    id="provinceName">1</span></span>-
                                    <span>所在市:<span th:text="${houseInfo.cityName}" id="cityName">1</span></span>-
                                    <span>所在区/县/镇:<span th:text="${houseInfo.regionName}"
                                                        id="regionName">1</span></span>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <!--PAGE CONTENT BEGINS HERE-->
                            <div class="span3">
                                <div class="control-group">
                                    住宅用途:<span th:text="${houseInfo.purpose}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    购买时间:<span th:text="${#dates.format(houseInfo.buyTime, 'yyyy年MM月dd日')}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    产权:<span th:text="${houseInfo.propertyRight + '年'}">1</span>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="control-group">
                                    房屋类型:<span th:text="${houseInfo.type == null ? '' : houseInfo.type.text}">1</span>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div>
                                    <ul class="ace-thumbnails clearfix">
                                        <li th:each="image : ${houseInfo.list}">
                                            <a th:href="@{'/' + ${image.houseImg}}" data-rel="colorbox">
                                                <img alt="" th:attr="id=${image.id}" th:src="@{'/' + ${image.houseImg}}"
                                                     style="max-height: 150px; max-width: 150px;"/>
                                                <div class="text">
                                                    <div class="inner">点击查看大图</div>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div id="allmap" style="width: 100%; height: 600px;"></div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="text-center span12">
                                <a shiro:hasPermission="/houseInfo/getAll" class="btn" href="getAll"
                                   th:href="@{/houseInfo/getAll}"><i class="fa fa-reply" aria-hidden="true"></i>返回</a>
                            </div>
                        </div>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <div th:replace="common/footer"/>
</div><!-- /.main-container -->
<div th:replace="common/buttom"/>

<form id="form" name="form" th:action="@{/houseInfo/getAll}" th:method="post" th:object="${houseInfoForm}">
    <input type="hidden" id="province" name="province" th:value="*{province}"/>
    <input type="hidden" id="city" name="city" th:value="*{city}"/>
    <input type="hidden" id="region" name="region" th:value="*{region}"/>
    <input type="hidden" id="lng" name="lng" th:value="${lng}">
    <input type="hidden" id="lat" name="lat" th:value="${lat}">
</form>

<link rel="stylesheet" th:href="@{/css/colorbox.min.css}"/>
<script th:src="@{/js/colorbox/jquery.colorbox.min.js}"></script>
<script th:src="@{/js/colorbox/colorbox.js}"></script>
<script type="text/javascript"
        th:src="@{http://api.map.baidu.com/api?v=2.0&amp;ak=a75vDOuWpdLz4hUpRpWxakuGuL6MRlnL}"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    $(function () {
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        if (lng === "" || lat === "") {
            getBoundary("#ff0000");
        } else {
            var point = new BMap.Point($("#lng").val(), $("#lat").val());
            map.centerAndZoom(point, 11);
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
    });

    function getBoundary(color) {
        var bdary = new BMap.Boundary();
        var location = $("#provinceName").text() + $("#cityName").text() + $("#regionName").text()
        bdary.get(location, function (rs) {       //获取行政区域
            map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: color}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray);    //调整视野
        });
    }

</script>
</body>
</html>
